<template>
	<view class="container">
		<view class="text">
			<textarea v-model="text" placeholder="请留下您的建议或者体验感受"></textarea>
		</view>
		<view class="list u-flex u-col-center">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="http + item" mode="aspectFill"></image>
				<view class="del" @click="list.splice(index,1)">
					<uni-icons type="clear" size="30" color="#F79022"></uni-icons>
				</view>
			</view>
			<view class="up" @click="upload">
				<image src="../../static/image/add.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="f-btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				list: [],
				http: this.$imgUrl,
			}
		},
		onLoad() {
			my.setNavigationBar({
			  frontColor: '#000',
			  backgroundColor: '#fff',
			})
			if (!uni.getStorageSync('token')) {
				uni.switchTab({
					url:'/pages/index/index'
				})
				return
			}
		},
		methods: {
			upload() {
				this.$http.uploads().then(res => {
					console.log(res,12121)
					this.list = [...this.list, ...res]
				});
			},
			submit() {
				if (!this.text && this.list.length == 0) {
					uni.showToast({
						title: '请留言或上传图片',
						icon: "none"
					});
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '确认要提交反馈吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$http.post('/api/user/addFeedback', {
								content: this.text,
								images: this.list.toString()
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E31D21;

	.container {
		width: 100vw;
		min-height: 100vh;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;

		.list {
			flex-wrap: wrap;

			.up {
				margin: 30rpx 50rpx 0 0;
				position: relative;
				width: 180rpx;
				height: 180rpx;
				text-align: center;
				align-items: center;
				display: flex;
				justify-content: center;
				background-color: #F5F5F5;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 52rpx;
					height: 52rpx;

				}
			}

			.item {
				margin: 30rpx 30rpx 0 0;
				position: relative;
				width: 180rpx;
				height: 180rpx;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}

				.del {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 50rpx;
					height: 50rpx;
					text-align: center;
					align-items: center;
					display: flex;
					justify-content: center;
				}
			}
		}

		.text {
			width: 100%;
			height: 300rpx;
			background: #F5F5F5;
			padding: 20rpx;
			box-sizing: border-box;
			

			textarea {
				width: 100%;
				height: 100%;
				font-size: 26rpx;
				color: #999999;
				box-sizing: border-box;
				background: #F5F5F5;
			}
		}

		.f-btn {
			margin-top: 150rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: @color;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 44rpx;
			text-align: center;
		}
	}
</style>